<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<style type="text/css">
			.skyblue {
				background-color: skyblue;
			}
		</style>
		<button class="add">添加一条新的访客信息</button>
		<button class="del">删除选中</button>
		<button class="sort">从小到大</button>
		<button class="all">一键选中</button>
		<button class="inverse1">反选</button>
		<button class="antitone">序列号反序</button>
		<table border="1" cellspacing="0" cellpadding="10">
			<tr>
				<th>序列号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
				<th>选择</th>
			</tr>
		</table>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var info = [{
					name: "胡杭",
					age: 16
				},
				{
					name: "胜明",
					age: 22
				},
				{
					name: "军毅",
					age: 21
				},
				{
					name: "晓华",
					age: 13
				},
				{
					name: "盛聪",
					age: 23
				},
				{
					name: "侦剑",
					age: 32
				},
				{
					name: "红翔",
					age: 25
				},
				{
					name: "超维",
					age: 18
				},
				{
					name: "士琪",
					age: 22
				},
				{
					name: "艳华",
					age: 20
				}
			];
			var tbody = $("tbody"),
				add = $(".add"),
				del = $(".del"),
				sort = $(".sort"),
				all = $(".all"),
				inverse1 = $(".inverse1"),
				antitone = $(".antitone"),
				trs,
				inp,
				a = 0;
			//  增加行
			add.on("click", function() {
				if(a < info.length) {
					var new_jq_tr = $("<tr><td>" + (a + 1) + "</td><td>" + info[a].name + "</td><td>" + info[a].age + "</td><td><button>删除</button></td><td><input type='checkbox'></td></tr>");
					tbody.append(new_jq_tr);
					a++;
				} else {
					a = 0;
				}
			})
			// 删除行
			del.on("click", function() {
				inp = $("input:checked");
				inp.parent().parent().remove();

			})
			//  单行删除
			tbody.on("click", function(e) {
				if(e.target.nodeName == "BUTTON") {
					console.log($(e.target).parent().parent().remove())
				}
			})
			// 选中高亮
			tbody.on("change", function(qq) {
				if(qq.target.nodeName == "INPUT") {
					$(qq.target).parent().parent().toggleClass("skyblue");
				}
			})
			// 年龄排序
			sort.on("click", function() {
				trs = $("tr:not(:first-child)");
				trs.sort(function(a, b) {
					return $(a).find("td:nth-of-type(3)").text() - $(b).find("td:nth-of-type(3)").text();
				})
				trs.each(function(i) {
					tbody.append(trs.eq(i));
				})
			})
			// 一键全选
			all.on("click", function() {
				inp = $("input");
				inp.each(function(i) {
					inp.eq(i).prop("checked", true);
					inp.eq(i).parent().parent().addClass("skyblue");
				})
			})
			// 反选
			inverse1.on("click", function() {
				inp = $("input");
				inp.each(function(i) {
					if(!(inp.eq(i).is(":checked"))) {
						inp.eq(i).prop("checked", true);
						inp.eq(i).parent().parent().addClass("skyblue");
					} else {
						inp.eq(i).prop("checked", false);
						inp.eq(i).parent().parent().removeClass("skyblue");
					}
				})
			})
			// 序号反序
			antitone.on("click", function() {
				trs = $("tr:not(:first-child)");
				trs.sort(function(a, b) {
					return $(b).find("td:nth-of-type(1)").text() - $(a).find("td:nth-of-type(1)").text();
				})
				trs.each(function(i) {
					tbody.append(trs.eq(i));
				})
			})
		</script>
	</body>

</html>